import {useRequest} from '@umijs/hooks'
import {Button, Descriptions, message, Popover, Spin, Tag} from 'antd'
import React, {useEffect, useState} from 'react'
import cookie from "react-cookies"
import Zmage from 'react-zmage'
import {getOriginString} from '../../../../utils/encrypt'
import {IconFont} from '../../../../utils/Iconfont'
import {fetchRequest} from '../../../../utils/Request'
import {url} from '../../../../utils/url'
import getImgInfo from '../../../../utils/getImgInfo'
import actionTypes from "../../actionTypes";
import {useDispatch} from "react-redux";


const type = {
    2: {text: "告警", color: "#fdec38"},
    3: {color: "#0ec671", text: "正常"},
    1: {color: "#f50206", text: "危险"},
    4: {color: undefined, text: "未知"},
    5: {color: undefined, text: "科道接口调用失败"},
    6: {color: undefined, text: ""}
}

export default function AccessRecordDetail(props: any) {

    const [detail, setdetail] = useState<any>()
    console.log(props)

    const getAccessDetail = useRequest(getAccessDetailInfo, {
        loadingDelay: 200,
        manual: true
    })
    const dispatch = useDispatch();

    async function getAccessDetailInfo(params: any) {
        params = {accessRecordsId: params}
        try {
            const json = await fetchRequest(url.GET_ACCESS_RECORD_DETAIL, params);
            if (json.success) {
                setdetail(json.data[0])
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message)
        }
    }

    //得到显示字段
    function getDisplayItem(data: any) {
        if (data === "" || typeof data === "undefined" || data === null)
            return "--"
        return data
    }


    useEffect(() => {

        getAccessDetail.run(props.content)
    }, [])

    const {content} = props;
    return (
        <Spin spinning={getAccessDetail.loading}>
            {detail === null || typeof detail === "undefined" ? null :
                <div>
                    <Descriptions title="人员信息" bordered>
                        <Descriptions.Item label="姓名">{getDisplayItem(detail.studentName)}</Descriptions.Item>
                        <Descriptions.Item label="联系电话">{getDisplayItem(detail.phone)}</Descriptions.Item>
                        <Descriptions.Item label="证件号">{getDisplayItem(detail.certNum)}</Descriptions.Item>
                        <Descriptions.Item label="人员类型">{getDisplayItem(detail.userTypeName)}</Descriptions.Item>
                        <Descriptions.Item label="防疫核验"><Tag color={detail.healthCode === undefined ||detail.healthCode ===null? undefined :
                            detail.healthCode.color}>{detail.healthCode === undefined ||detail.healthCode ===null? "" : detail.healthCode.stateName}</Tag></Descriptions.Item>
                        <Descriptions.Item label="门禁卡状态">{detail.accessCardState === '有效' ?
                            <Tag color="#0ec671">{detail.accessCardState}</Tag> :
                            <Tag color="#f50">{detail.accessCardState}</Tag>}</Descriptions.Item>
                        <Descriptions.Item label="宿舍地址">{getDisplayItem(detail.addressName)}</Descriptions.Item>
                    </Descriptions>
                    <br/>
                    <br/>

                    <Descriptions title="人员进出信息" bordered>
                        <Descriptions.Item label="门禁出入">{getDisplayItem(detail.inOutFlag)}</Descriptions.Item>
                        <Descriptions.Item label="出入时间">{getDisplayItem(detail.recordsTime)}</Descriptions.Item>
                        <Descriptions.Item label="体温">{getDisplayItem(detail.temperature)}</Descriptions.Item>
                        <Descriptions.Item label="开门方式">{getDisplayItem(detail.openType)}</Descriptions.Item>
                        <Descriptions.Item label="进出设备名称">{getDisplayItem(detail.deviceName)}</Descriptions.Item>

                        <Descriptions.Item label="人脸照片"
                            // style={ detail.photo === null || typeof detail.photo === "undefined" ?  { display: 'none' }}
                        >{detail.photo === null || typeof detail.photo === "undefined" ? null :
                            <img width="80" src={url.GET_inOut_FACE_URL + 'accessToken=' + getImgInfo(detail.photo)}
                                 style={{cursor: 'pointer'}}
                                 onClick={() => Zmage.browsing({src: url.GET_inOut_FACE_URL + 'accessToken=' + getImgInfo(detail.photo)})}/>}</Descriptions.Item>
                    </Descriptions>
                    <br/>
                    <br/>
                    <div style={{textAlign: 'center'}} onClick={props.onClose}>
                        <Button>返回</Button>
                    </div>
                </div>}
        </Spin>

    )
}
